<!-- 发布提示 -->
<script setup>
import { toRefs, onMounted, computed } from 'vue';
import { ElMessageBox } from 'element-plus';

const props = defineProps({
  messageBoxShow: Boolean,
  messageText: String,
  messageBoxType: String, // 支持: '发布' | '确定' | '删除' | '保存'
});
const { messageBoxShow, messageText, messageBoxType } = toRefs(props);
const emit = defineEmits(['handleMessageBox']);

// 配置映射表：类型 -> 配置
const configMap = {
  发布: { confirmText: '发布', cancelText: '再想一想', className: 'message-logout' },
  确定: { confirmText: '确定', cancelText: '再想一想', className: 'message-logout' },
  删除: { confirmText: '删除', cancelText: '再想一想', className: 'message-delete' },
  保存: { confirmText: '保存', cancelText: '不保存', className: 'message-logout-save' },
};

const currentConfig = computed(() => {
  return configMap[messageBoxType.value] || configMap.确定; // 默认 fallback
});

onMounted(() => {
  if (!messageBoxShow.value) return;

  const { confirmText, cancelText, className } = currentConfig.value;

  ElMessageBox.confirm(messageText.value, '提示', {
    confirmButtonText: confirmText,
    cancelButtonText: cancelText,
    customClass: className,
  })
    .then(() => {
      emit('handleMessageBox', true);
    })
    .catch(() => {
      emit('handleMessageBox', false);
    });
});
</script>

<template>
  <div></div>
</template>

<style lang="scss">
// 公共样式提取
%message-box-common {
  border-radius: 10px;

  .el-message-box__header {
    padding-left: 20px;
    .el-message-box__title {
      color: $base-color;
      font-weight: 600;
      font-size: 16px;
      text-align: left;
    }
  }

  .el-message-box__content {
    .el-message-box__container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0;

      .el-message-box__message {
        color: $base-color;
        font-weight: 400;
        font-size: 14px !important;
        p {
          font-size: 16px !important;
        }
      }
    }
  }

  .el-message-box__btns {
    justify-content: flex-end;

    .el-button {
      height: 32px;
      border-radius: 4px;
      span {
        font-weight: 400;
        font-size: 14px;
      }
    }

    .el-button--primary {
      margin-left: 36px;
    }
  }
}

// 类型特有样式（仅覆盖差异）
.message-logout {
  @extend %message-box-common;
  width: 450px;
  height: 180px !important;

  .el-message-box__btns {
    .el-button {
      width: 80px;
      color: $base-button-color-info;
      background-color: $base-button-background-info;
      border-color: $border-info;
      span {
        color: #333;
      }
    }
    .el-button--primary {
      background-color: $base-button-background-blue;
      border-color: $border-blue;
      span {
        color: $base-color-blue;
      }
    }
  }
}

.message-delete {
  @extend %message-box-common;
  width: 384px;
  height: 164px !important;

  .el-message-box__btns {
    .el-button {
      width: 65px;
      color: $base-color-info;
      background-color: $base-button-background-info;
      border-color: $border-info;
      span {
        color: $base-color-info;
      }
    }
    .el-button--primary {
      background-color: $base-button-background-red;
      border-color: $base-button-background-red;
      span {
        color: $base-color-red;
      }
    }
  }
}

.message-logout-save {
  @extend %message-box-common;
  width: 384px;
  height: 164px !important;

  .el-message-box__content .el-message-box__container {
    align-items: flex-start; // 注意：原代码写的是 align-items: left（无效），应为 flex-start
  }

  .el-message-box__btns {
    .el-button {
      width: 65px;
      color: $base-color-info;
      background-color: $base-button-background-info;
      border-color: $base-button-background-info;
      span {
        color: $base-color-info;
      }
    }
    .el-button--primary {
      background-color: $base-button-background-green;
      border-color: transparent; // 根据实际需要调整
      span {
        color: $base-color-green;
      }
    }
  }
}
</style>
